import { FC, useContext } from "react";
import styled from "styled-components";
import { Button } from "antd";
import { TodoContext } from "..";

const Container = styled.ul`
  width: 600px;
  min-height: 400px;
  margin: 20px auto;
  padding: 10px;
  background-color: #eee;
  & > li {
    min-height: 44px;
    padding: 10px;
    margin-bottom: 10px;
    background-color: #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 5px;
    &:nth-child(even) {
      background-color: #fff;
    }
    &:hover {
      button {
        display: block;
      }
    }
    button {
      display: none;
    }
  }
`;
const List: FC = () => {
  const { state, dispatch } = useContext(TodoContext);
  return (
    <Container>
      {state.map((t) => {
        return (
          <li key={t.id}>
            <span>
              {t.id}-{t.title}
            </span>
            <Button
              size="small"
              danger
              onClick={() => {
                dispatch({ type: "remove", payload: t.id });
              }}>
              删除
            </Button>
          </li>
        );
      })}
    </Container>
  );
};
export default List;
